<template>
  <div class="job-push">
    <div class="push-content">
      <div class="push-item">
        <BInput label="职位名称" v-model="job.job_name"></BInput>
      </div>
      <div class="push-item">
        <BTags label="职位类型选项"
               v-model="job.category_id"
               :tags="categoryList"></BTags>
      </div>
      <div class="push-item">
        <BTags label="办公方式"
               v-model="job.is_remote"
               :tags="[{name: '远程',id: 1 },{name: '全职',id: 2}]"></BTags>
      </div>
      <div class="push-item">
<!--        <BInput label="薪资范围"></BInput>-->
        <BPrices label="薪资范围"  v-model="job.salary"></BPrices>
      </div>
      <div class="push-item">
        <BTags label="薪资结算方式"
               v-model="job.settlement_modes"
               :tags="[{name: '月结',id: 2},{name: '日结',id: 1}]"></BTags>
      </div>
      <div class="push-item">
        <BText label="职位介绍" v-model="job.desc"></BText>
      </div>
      <div class="push-item">
        <BInput label="联系方式">
          <template v-slot:next>
            <image class="ipt-icon" src=""></image>
          </template>
        </BInput>
        <BInput >
          <template v-slot:next>
            <image class="ipt-icon" src=""></image>
          </template>
        </BInput>
      </div>
    </div>

    <div class="flex align-center justify-center btns">
      <div class="btn">取消</div>
      <div class="btn push" @click="bindSubmit">发布</div>
    </div>
<!--    <BTab></BTab>-->
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, shallowRef} from "vue";
import BInput from "../../components/from/BInput.vue";
import BTags from "../../components/from/BTags.vue";
import BText from "../../components/from/BText.vue";
import {category_data, jobCreate_data} from "../../api/Job";
import BTab from "../../components/BTab.vue";
import BPrices from "../../components/from/BPrices.vue";
const tabIndex = ref(1);

const categoryList = shallowRef();

onMounted(() => {
  category_data().then(res => {
    categoryList.value = res
  })
})

const job = ref({
  category_id: 2,
  job_name: '',
  desc: '',
  is_remote: 1,
  settlement_modes: 1,
  salary: ''
})

const bindSubmit = () => {
  jobCreate_data(job.value)
}

</script>

<style lang="scss" scoped>
.push-content {
  padding: 32rpx;
  .push-item {
    padding: 32rpx 0 0;
    .ipt-icon {
      width: 44rpx;
      height: 44rpx;
      background: #24FAF6;
    }
  }
}

.btns {
  gap: 60rpx;
  padding: 32rpx 0 ;
  .btn {
    width: 192rpx;
    height: 64rpx;
    background: rgba(13, 51, 51, 0.08);
    border-radius: 20rpx;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 64rpx;
    text-align: center;
    color: #0D3333;;
    &.push {
      color: #000000;
      background: var(--main)
    }
  }
}
</style>
